import React from 'react';

const ComponentIcon = ({
  width = '24px',
  height = '24px',
  color,
  fill,
  secondaryfill,
  className,
  ...props
}) => {
  if (color) {
    return (
      <svg
        className={className}
        id="Layer_1"
        xmlns="http://www.w3.org/2000/svg"
        x="0px"
        y="0px"
        viewBox="0 0 30 30"
        xmlSpace="preserve"
        enableBackground="0 0 30 30"
        width={width}
        height={height}
        // opacity="80%"
        fill={fill}
        {...props}
      >
        <g>
          <path
            fill="none"
            d="M5.6,23.6c-0.6,0-1,0.5-1,1s0.5,1,1,1c0.6,0,1-0.5,1-1C6.7,24.1,6.2,23.6,5.6,23.6z"
          />
          <path
            fill="none"
            d="M24.4,6.4c0.6,0,1-0.5,1-1s-0.5-1-1-1c-0.6,0-1,0.5-1,1C23.4,5.9,23.8,6.4,24.4,6.4z"
          />
          <path
            fill="none"
            d="M5.6,4.3c-0.6,0-1,0.5-1,1c0,0.6,0.5,1,1,1c0.6,0,1-0.4,1-1C6.7,4.8,6.2,4.3,5.6,4.3z"
          />
          <path
            fill="none"
            d="M17.9,11.4h-5.8c-0.4,0-0.7,0.3-0.7,0.7v5.8c0,0.4,0.3,0.7,0.7,0.7h5.8c0.4,0,0.7-0.3,0.7-0.7v-5.8
		C18.6,11.7,18.3,11.4,17.9,11.4z"
          />
          <circle fill="none" cx="2.5" cy="15" r="1" />
          <circle fill="none" cx="27.5" cy="15" r="1" />
          <path
            fill="none"
            d="M24.4,25.7c0.6,0,1-0.5,1-1c0-0.6-0.5-1-1-1c-0.6,0-1,0.4-1,1C23.4,25.2,23.8,25.7,24.4,25.7z"
          />
          <path
            fill="#00D3A9"
            d="M11.5,23.9H7.9c-0.3-1-1.2-1.8-2.4-1.8c-1.4,0-2.5,1.1-2.5,2.5c0,1.4,1.1,2.5,2.5,2.5c1.1,0,2.1-0.8,2.4-1.8
		h4.4c0.4,0,0.7-0.3,0.7-0.7v-2.9h-1.5V23.9z M5.6,25.7c-0.6,0-1-0.5-1-1s0.5-1,1-1c0.6,0,1,0.5,1,1C6.6,25.2,6.2,25.7,5.6,25.7z"
          />
          <path
            fill="#00D3A9"
            d="M17.1,24.6c0,0.4,0.3,0.7,0.7,0.7h4.3c0.3,1,1.2,1.8,2.4,1.8c1.4,0,2.5-1.1,2.5-2.5c0-1.4-1.1-2.5-2.5-2.5
		c-1.1,0-2.1,0.8-2.4,1.8h-3.6v-2.2h-1.4V24.6z M24.4,23.6c0.6,0,1,0.5,1,1c0,0.6-0.5,1-1,1c-0.6,0-1-0.5-1-1
		C23.4,24.1,23.8,23.6,24.4,23.6z"
          />
          <path
            fill="#00D3A9"
            d="M27.5,12.5c-1.1,0-2.1,0.8-2.4,1.8h-3.4l0,1.5h3.4c0.3,1,1.2,1.8,2.4,1.8c1.4,0,2.5-1.1,2.5-2.5
		S28.9,12.5,27.5,12.5z M27.5,16c-0.6,0-1-0.5-1-1s0.5-1,1-1s1,0.5,1,1S28.1,16,27.5,16z"
          />
          <path
            fill="#00D3A9"
            d="M18.5,6.1h3.6c0.3,1,1.2,1.8,2.4,1.8c1.4,0,2.5-1.1,2.5-2.5c0-1.4-1.1-2.5-2.5-2.5c-1.1,0-2.1,0.8-2.4,1.8
		h-4.3C17.4,4.7,17,5,17,5.4v2.9h1.5V6.1z M24.4,4.3c0.6,0,1,0.5,1,1s-0.5,1-1,1c-0.6,0-1-0.5-1-1C23.4,4.8,23.8,4.3,24.4,4.3z"
          />
          <path
            fill="#00D3A9"
            d="M4.9,14.3c-0.3-1-1.2-1.8-2.4-1.8C1.1,12.5,0,13.6,0,15s1.1,2.5,2.5,2.5c1.1,0,2.1-0.8,2.4-1.8h3.4l0-1.5H4.9z
		 M2.5,16c-0.6,0-1-0.5-1-1s0.5-1,1-1c0.6,0,1,0.5,1,1S3.1,16,2.5,16z"
          />
          <path
            fill="#00D3A9"
            d="M13,5.4c0-0.4-0.3-0.7-0.7-0.7H7.9c-0.3-1-1.2-1.8-2.4-1.8C4.2,2.9,3.1,4,3.1,5.4c0,1.4,1.1,2.5,2.5,2.5
		c1.1,0,2.1-0.8,2.4-1.8h3.6v2.2H13V5.4z M5.6,6.4c-0.6,0-1-0.5-1-1c0-0.6,0.5-1,1-1c0.6,0,1,0.5,1,1C6.6,5.9,6.2,6.4,5.6,6.4z"
          />
          <path
            fill="#00B39F"
            d="M21.7,10.7c0-1.3-1.1-2.4-2.4-2.4h-0.9H17h-4h-1.5h-0.9c-1.3,0-2.4,1.1-2.4,2.4v3.6l0,1.5v3.6
		c0,1.3,1.1,2.4,2.4,2.4h0.9H13h4h1.4h0.8c1.3,0,2.4-1.1,2.4-2.4v-3.6l0-1.5V10.7z M18.6,17.9c0,0.4-0.3,0.7-0.7,0.7h-5.8
		c-0.4,0-0.7-0.3-0.7-0.7v-5.8c0-0.4,0.3-0.7,0.7-0.7h5.8c0.4,0,0.7,0.3,0.7,0.7V17.9z"
          />
        </g>
        <path fill="#00D3A9" d="M12.8,12.8h4.4v4.4h-4.4V12.8z" />
      </svg>
    );
  }
  return (
    <svg
      className={className}
      id="Layer_1"
      viewBox="0 0 30 30"
      width={width}
      height={height}
      fill={fill}
      {...props}
    >
      <g>
        <path
          fill="none"
          fillOpacity="0.8"
          d="M5.6,23.6c-0.6,0-1,0.5-1,1s0.5,1,1,1c0.6,0,1-0.5,1-1C6.7,24.1,6.2,23.6,5.6,23.6z"
        />
        <path
          fill="none"
          fillOpacity="0.8"
          d="M24.4,6.4c0.6,0,1-0.5,1-1s-0.5-1-1-1c-0.6,0-1,0.5-1,1C23.4,5.9,23.8,6.4,24.4,6.4z"
        />
        <path
          fill="none"
          fillOpacity="0.8"
          d="M5.6,4.3c-0.6,0-1,0.5-1,1c0,0.6,0.5,1,1,1c0.6,0,1-0.4,1-1C6.7,4.8,6.2,4.3,5.6,4.3z"
        />
        <path
          fill="none"
          fillOpacity="0.8"
          d="M17.9,11.4h-5.8c-0.4,0-0.7,0.3-0.7,0.7v5.8c0,0.4,0.3,0.7,0.7,0.7h5.8c0.4,0,0.7-0.3,0.7-0.7v-5.8
		C18.6,11.7,18.3,11.4,17.9,11.4z"
        />
        <circle fill="none" fillOpacity="0.8" cx="2.5" cy="15" r="1" />
        <circle fill="none" fillOpacity="0.8" cx="27.5" cy="15" r="1" />
        <path
          fill="none"
          fillOpacity="0.8"
          d="M24.4,25.7c0.6,0,1-0.5,1-1c0-0.6-0.5-1-1-1c-0.6,0-1,0.4-1,1C23.4,25.2,23.8,25.7,24.4,25.7z"
        />
        <path
          className="component-tentacle-svg-path-front"
          fill={secondaryfill}
          fillOpacity="0.8"
          d="M11.5,23.9H7.9c-0.3-1-1.2-1.8-2.4-1.8c-1.4,0-2.5,1.1-2.5,2.5c0,1.4,1.1,2.5,2.5,2.5c1.1,0,2.1-0.8,2.4-1.8
		h4.4c0.4,0,0.7-0.3,0.7-0.7v-2.9h-1.5V23.9z M5.6,25.7c-0.6,0-1-0.5-1-1s0.5-1,1-1c0.6,0,1,0.5,1,1C6.6,25.2,6.2,25.7,5.6,25.7z"
        />
        <path
          className="component-tentacle-svg-path-back"
          fill={secondaryfill}
          fillOpacity="0.8"
          d="M17.1,24.6c0,0.4,0.3,0.7,0.7,0.7h4.3c0.3,1,1.2,1.8,2.4,1.8c1.4,0,2.5-1.1,2.5-2.5c0-1.4-1.1-2.5-2.5-2.5
		c-1.1,0-2.1,0.8-2.4,1.8h-3.6v-2.2h-1.4V24.6z M24.4,23.6c0.6,0,1,0.5,1,1c0,0.6-0.5,1-1,1c-0.6,0-1-0.5-1-1
		C23.4,24.1,23.8,23.6,24.4,23.6z"
        />
        <path
          fill={secondaryfill}
          fillOpacity="0.8"
          d="M27.5,12.5c-1.1,0-2.1,0.8-2.4,1.8h-3.4l0,1.5h3.4c0.3,1,1.2,1.8,2.4,1.8c1.4,0,2.5-1.1,2.5-2.5
		S28.9,12.5,27.5,12.5z M27.5,16c-0.6,0-1-0.5-1-1s0.5-1,1-1s1,0.5,1,1S28.1,16,27.5,16z"
        />
        <path
          className="component-tentacle-svg-path-back"
          fill={secondaryfill}
          fillOpacity="0.8"
          d="M18.5,6.1h3.6c0.3,1,1.2,1.8,2.4,1.8c1.4,0,2.5-1.1,2.5-2.5c0-1.4-1.1-2.5-2.5-2.5c-1.1,0-2.1,0.8-2.4,1.8
		h-4.3C17.4,4.7,17,5,17,5.4v2.9h1.5V6.1z M24.4,4.3c0.6,0,1,0.5,1,1s-0.5,1-1,1c-0.6,0-1-0.5-1-1C23.4,4.8,23.8,4.3,24.4,4.3z"
        />
        <path
          fill={secondaryfill}
          fillOpacity="0.8"
          d="M4.9,14.3c-0.3-1-1.2-1.8-2.4-1.8C1.1,12.5,0,13.6,0,15s1.1,2.5,2.5,2.5c1.1,0,2.1-0.8,2.4-1.8h3.4l0-1.5H4.9z
		 M2.5,16c-0.6,0-1-0.5-1-1s0.5-1,1-1c0.6,0,1,0.5,1,1S3.1,16,2.5,16z"
        />
        <path
          className="component-tentacle-svg-path-front"
          fill={secondaryfill}
          fillOpacity="0.8"
          d="M13,5.4c0-0.4-0.3-0.7-0.7-0.7H7.9c-0.3-1-1.2-1.8-2.4-1.8C4.2,2.9,3.1,4,3.1,5.4c0,1.4,1.1,2.5,2.5,2.5
		c1.1,0,2.1-0.8,2.4-1.8h3.6v2.2H13V5.4z M5.6,6.4c-0.6,0-1-0.5-1-1c0-0.6,0.5-1,1-1c0.6,0,1,0.5,1,1C6.6,5.9,6.2,6.4,5.6,6.4z"
        />
        <path
          fill={fill}
          d="M21.7,10.7c0-1.3-1.1-2.4-2.4-2.4h-0.9H17h-4h-1.5h-0.9c-1.3,0-2.4,1.1-2.4,2.4v3.6l0,1.5v3.6
		c0,1.3,1.1,2.4,2.4,2.4h0.9H13h4h1.4h0.8c1.3,0,2.4-1.1,2.4-2.4v-3.6l0-1.5V10.7z M18.6,17.9c0,0.4-0.3,0.7-0.7,0.7h-5.8
		c-0.4,0-0.7-0.3-0.7-0.7v-5.8c0-0.4,0.3-0.7,0.7-0.7h5.8c0.4,0,0.7,0.3,0.7,0.7V17.9z"
        />
      </g>
      <path fill={secondaryfill} fillOpacity="0.8" d="M12.8,12.8h4.4v4.4h-4.4V12.8z" />
    </svg>
  );
};

export default ComponentIcon;
